<template>
  <div class="log-in">
    <div class="ctx">
      <div class="img">
        <log-img class="log-img" />
      </div>
      <div class="log-ctx">
        <div class="form">
          <div class="label">
            <ul>
              <li v-for="data in label" :key="data.index">
                <span>{{ data.name }}</span>
              </li>
            </ul>
          </div>
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            class="demo-ruleForm"
            @submit.native.prevent
          >
            <el-form-item prop="email">
              <el-input v-model="ruleForm.email" autocomplete="off" placeholder="请输入邮箱账号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                v-model="ruleForm.password"
                autocomplete="off"
                placeholder="请输入会员密码"
              ></el-input>
            </el-form-item>
            <el-form-item prop="imgyzm" class="yzm">
              <div class="yzm-img">
                <img :src="`${imgUrl}/log_operation/getimgyzm?${random}`" @click="randomNum" alt />
              </div>
              <el-input v-model.number="ruleForm.imgyzm" autocomplete="off" placeholder="请输入计算结果"></el-input>
            </el-form-item>
            <el-form-item>
              <el-select class="region" v-model="ruleForm.savetime">
                <el-option label="请选择账号有效期(默认单次有效)" value="0"></el-option>
                <el-option label="保存一天" value="1"></el-option>
                <el-option label="保存一个星期" value="7"></el-option>
                <el-option label="保存一个月" value="30"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" native-type="submit" @click="submitForm('ruleForm')">提交</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
          <div class="router-link">
            <router-link to="register">注册</router-link>
            <router-link to="update_pw">修改密码</router-link>
            <router-link to="find_pw">忘记密码</router-link>
          </div>
        </div>
      </div>
    </div>
    <footnote />
  </div>
</template>

<script>
import logImg from "@/views/users/log/log_img.vue";
import { mapState, mapMutations } from "Vuex";
import { userUrl } from "@/public/uri.js";
export default {
  name: "log_in",
  components: {
    "log-img": logImg
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (value.length < 3) {
          callback(new Error("密码长度不能小于3位"));
        }
        callback();
      }
    };
    let emailPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入邮箱"));
      } else {
        let pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        if (pattern.test(value)) {
          callback();
        } else {
          callback(new Error("邮箱格式错误"));
        }
      }
    };
    let checkYzm = (rule, value, callback) => {
      if (!value) {
        callback(new Error("验证码不能为空"));
      } else if (!Number.isInteger(value)) {
        callback(new Error("请输入数字值"));
      } else {
        callback();
      }
    };
    return {
      imgUrl: userUrl,
      random: 0,
      ruleForm: {
        password: "",
        email: "",
        savetime: "0",
        imgyzm: ""
      },
      rules: {
        password: [{ validator: validatePass, trigger: "blur" }],
        email: [{ validator: emailPass, trigger: "blur" }],
        imgyzm: [{ validator: checkYzm, trigger: "blur" }]
      },
      label: [
        {
          name: "邮箱登录",
          index: 0
        }
        // {
        //   name: "手机号登录",
        //   index: 1
        // },
        // {
        //   name: "微信登录",
        //   index: 2
        // },
        // {
        //   name: "QQ登录",
        //   index: 3
        // }
      ]
    };
  },
  methods: {
    randomNum() {
      this.random = Date.now();
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let data = new FormData();
          data.append("email", this.ruleForm.email);
          data.append("password", this.ruleForm.password);
          data.append("imgyzm", this.ruleForm.imgyzm);
          data.append("savetime", this.ruleForm.savetime);

          this.setSsData("");
          this.setRzData("");
          this.setUserInfoData("");
          this.setAlbumsData("");
          this.setUserPhotosData([]);
          this.setvideosData("");
          this.setUserVideoData("");
          this.setSkillColData("");
          this.setSkillData("");
          this.$axios
            .post(`${userUrl}/log_operation/login`, data)
            .then(res => {
              if (res.data.ok === 1) {
                this.$message({
                  type: "success",
                  message: res.data.data
                });
                this.$store.commit("user/setUserName", this.ruleForm.email);
                if (this.ruleForm.savetime !== "0") {
                  localStorage.setItem(
                    "from_17yong",
                    JSON.stringify({
                      email: this.ruleForm.email,
                      password: this.ruleForm.password,
                      imgyzm: this.ruleForm.imgyzm,
                      savetime: this.ruleForm.savetime
                    })
                  );
                }
                this.resetForm("ruleForm");
                this.$store.commit("user/setLogFlog", true);
                
                if (this.prePath && this.prePath !== "/log_in") {
                  this.$router.push({ path: this.prePath });
                } else {
                  this.$router.push({ path: "/users/ps_info" });
                }
              } else {
                alert(res.data.data);
              }
            })
            .catch(err => {
              alert("500：" + err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    ...mapMutations("user", [
      "setSsData",
      "setRzData",
      "setUserInfoData",
      "setAlbumsData",
      "setUserPhotosData",
      "setvideosData",
      "setUserVideoData",
      "setSkillColData",
      "setSkillData"
    ])
  },
  computed: {
    ...mapState("user", ["prePath"])
  }
};
</script>

<style lang="sass" scoped>
@import '@/assets/default.sass'
.log-in
  width: 100%
  height: 100%
  .ctx
    width: 1280px
    margin: 0 auto
    height: 80vh
    overflow: hidden
    @include flex(flex-start,flex-start)
    .img
      flex: 0 0 60%
      height: 100%
      @include flex(flex-start,center)
      >.log-img
        width: 85%
        height: 70%
        background-color: #666
    .log-ctx
      flex: 1
      height: 100%
      @include flex(center,center)
      .form
        width: 100%
        height: 70%
        background-color: #fff
        box-shadow: 0px 0px 10px rgba(0,0,0,.1)
        .label
          width: 100%
          height: 8%
          >ul
            width: 100%
            height: 100%
            border-bottom: 1px solid #dcdcdc
            @include flex(flex-satrt,center)
            >li
              flex: 1
              height: 100%
              cursor: pointer
              border-right: 1px solid #dcdcdc
              @include flex(center,center)
              &:last-child
                border: none              
        .demo-ruleForm
          width: 100%
          height: 82%
          padding: 0 10%
          @include align(center)
          .el-form-item
            flex: 100%
            .region
              width: 100%
          .yzm
            width: 100%
            .yzm-img
              width: 40%
              display: inline-block
              border: 1px solid #dcdcdc
            .el-input
              width: 60%
              padding-left: 10%
              display: inline-block
        .router-link
          width: 100%
          height: 10%
          border-top: 1px solid #dcdcdc
          padding: 0 10%
          @include flex(space-between,center)
</style>